<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
function loadImg(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function() {
            resolve(img);
        }
        img.onerror = function() {
            reject(new Error('Could not load image at' + url))
        }
        img.src = url 
    })
}
// loadImg('https://img.36krcdn.com/20220819/v2_4cdc578821be4da69ba9428ce7168c22_img_jpg')
//     .then(img => {
//         document.body.appendChild(img)
//     })
const urls = [
    'https://img.36krcdn.com/20220819/v2_4cdc578821be4da69ba9428ce7168c22_img_jpg',
    'https://img.36krcdn.com/20220819/v2_72fca4c86f3f49cea9269b8a807cb5d7_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220819/v2_5ccd624049fc42a8850809af34608204_img_000?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220811/v2_9254cffc195b4f4782e28fa34a019a4e_img_jpg',
    'https://img.36krcdn.com/20220819/v2_3bb8f0a7f25643f3955904ec4415f6ff_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220812/v2_db135c2ba3b34f9f9138ca6bcce132fb_img_jpg',
    'https://img.36krcdn.com/20220819/v2_f9016b4a81d6487185947921d77585cb_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220819/v2_16cd9e64866342278ead4fb7b180fbad_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220819/v2_4df492bfcdb84638a22c1cddd09acc60_img_jpeg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220819/v2_ac3cbab297f2459381c0898742515544_img_jpeg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220819/v2_19a316bd8b9c4bcb8988888ade91602c_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
    'https://img.36krcdn.com/20220819/v2_adfe0afe1ab948aaaa6862429f81a1cc_img_jpg',
    'https://img.36krcdn.com/20220819/v2_bcda089f23ac43aaaa0395b7f214c3bb_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center'
]
// promise limit 限流 
function limitLoad(urls, handler, limit) {
    // 序列
    let sequence = [].concat(urls);// 深拷贝 数组解决方案 
    // console.log(sequence);
    let promises = sequence.splice(0, limit).map((url, index) => {
        return handler(url).then(() => {
            return index;// Promsei.resolve(index)
        })
    })
    // console.log(promises)
    return sequence
        .reduce((pCollect, url) => {
            // 每个promise 
            return pCollect.then(() => {
                return Promise.race(promises);
            })
            .then(fastestIndex => {
                promises[fastestIndex] = handler(url).then(
                    () => {
                        return fastestIndex
                    }
                )
            })
            .catch(err => {
                console.error(err);
            })
        }, Promise.resolve())
        .then(() => {
            return Promise.all(promises)
        })

}
limitLoad(urls, loadImg, 3)
    .then(res => {
        console.log('图片全部加载完成')
    })
    .catch(err => {
        console.error(err)
    })
</script>
</body>
</html>